function SubType() {
	this.$container = document.querySelector('#container');
	this.$container1 = document.querySelector('#container1');
	this.$loading = document.querySelector('.loading');
	this.$loading1 = document.querySelector('.loading1');
	this.I = 0;
	this.J = 0;
	this.rowNum = 4;
	this.colNum = 6;
	this.max = 24;
	this.conWidth = 1200;
	this.conHeight = 675;
	this.prevX = 0;
}

SubType.prototype = {
	init: function () {

		var img = new Image();
		var img1 = new Image();
		url = [
			['./src/images/1/1.png', './src/images/1/2.png'],
			['./src/images/2/1.png', './src/images/2/2.png']
		];
		_this = this;
		img.onload = function () {
			_this.$container.style.backgroundImage = 'url(' + url[0][0] + ')';

			_this.$container1.style.backgroundImage = 'url(' + url[0][1] + ')';
			var hammer = new Hammer(_this.$container);
			var hammer1 = new Hammer(_this.$container1);
			_this.$loading.style.display = 'none';
			_this.$loading1.style.display = 'none';

			hammer.on('pan', function (e) {

				if (e.deltaX > _this.prevX) {
					_this.rotate('anti');
				} else {
					_this.rotate('clockwise');
				}

				_this.prevX = e.deltaX;

			});
			hammer1.on('pan', function (e) {

				if (e.deltaX > _this.prevX) {
					_this.rotate('anti');
				} else {
					_this.rotate('clockwise');
				}

				_this.prevX = e.deltaX;

			});
		};

		img.src = url[0][0];
		img1.src = url[0][1];

		this.createMatrix();



	},

	rotate(type) { //clockwise: 顺时针, anti: 逆时针 
		if (type == 'clockwise') {
			this.I++;

			if (this.I >= this.colNum) {
				this.I = 0;
				this.J++;
				if (this.J >= this.rowNum) this.J = 0;
			}

		} else if (type == 'anti') {
			this.I--;

			if (this.I < 0) {
				this.I = this.colNum - 1;
				this.J--;
				if (this.J < 0) this.J = this.rowNum - 1;
			}
		}
		// console.log(this.I, this.J);
		this.changePosition();
	},

	changePosition() {
		// console.log(this.matrix[this.J][this.I]);
		this.$container.style.backgroundPosition = this.matrix[this.J][this.I];
		this.$container1.style.backgroundPosition = this.matrix[this.J][this.I];

	},

	createMatrix() {
		this.matrix = [];

		var arr = [];


		for (var i = 0; i < this.max; i++) {
			var position = '-' + this.I * this.conWidth + ' -' + this.J * this.conHeight;
			arr.push(position);
			// console.log(position)
			this.I++;

			if ((i + 1) % this.colNum == 0) {
				this.matrix.push(arr);
				arr = [];
				this.I = 0;
				this.J++;
			}
		}
		// console.log(this.matrix);
		this.I = 0;
		this.J = 0;
	},

	colorCar: function (i) {
		var img = new Image();
		var img1 = new Image();
		url = [
			['./src/images/1/1.png', './src/images/1/2.png'],
			['./src/images/2/1.png', './src/images/2/2.png']
		];
		_this = this;
		img.onload = function () {
			_this.$container.style.backgroundImage = 'url(' + url[i][0] + ')';

			_this.$container1.style.backgroundImage = 'url(' + url[i][1] + ')';
			var hammer = new Hammer(_this.$container);
			var hammer1 = new Hammer(_this.$container1);
			$('.loading').hide()
		}
		img.src = url[i][0];
		img1.src = url[i][1];
		this.createMatrix();
	}
};

var app = new SubType();

app.init();


$('.carcol li').on('click', function () {
	$('.loading').show();
	app.colorCar($(this).index());
	// if($aIndex == 1){
	// 	$('#container').hide();
	// 	$('#container1').show()
	// }
	// if($aIndex == 0){
	// 	$('#container').show();
	// 	$('#container1').hide()
	// }
})

var pageEnjoy = document.getElementById('pageEnjoy');
var mc = new Hammer(pageEnjoy);
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });

mc.on("panup pandown tap press", function(ev) {
    if(ev.type == 'panup'){
		$('#container').hide();
			$('#container1').show();
	}
	if(ev.type == 'pandown'){
		$('#container').show();
		$('#container1').hide();
	  }
});